<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style type="text/css">
			#list h1{
				color: red;
				font-size: 200px;
				padding: 20px;
				float: left;
			}
			#list .color{
				color: blue;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				//1.抓元素
				var list = document.getElementById("list");
				var hn = document.getElementsByTagName('h1');
				//8.来一个数组
				var arr = ['A','B','C','D','E','F'];
				//2.键盘按下事件
				window.onkeydown = function(e){
					//3.获取事件对象
					var ev = window.event || e;
					//4.获取用户按下的键盘字符
					var word = String.fromCharCode(ev.keyCode);
					//5.遍历逐一对比
					for (var i=0;i<hn.length;i++) {
						//6.对比 如果对比成功 就让他消失
						if(hn[i].innerHTML == word){
							//7.删除节点
							list.removeChild(hn[i]);
							//9.设定一个随机数
							var num = Math.floor(Math.random()*arr.length);
							//10.创建一个空元素节点
							var obj = document.createElement('h1');
							obj.setAttribute('class','color');
							//11.加上标签内容
							obj.innerHTML = arr[num];
							//12.追加到最后一个
							list.appendChild(obj);
							//13.避免删去相同的字符
							break;
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="list">
			<h1>A</h1>
			<h1>B</h1>
			<h1>C</h1>
			<h1>D</h1>
			<h1>E</h1>
			<h1>F</h1>
		</div>
	</body>
</html>
